<template>
  <div class="left-sub-content">
    <div class="card-item">
      <div class="card-title">
        非税收入情况
      </div>
      <div class="card-main">
        <common-cyclic-chart ref="financialRevenue" :config="financiaConfig" class="cyclic-box financia-cyc">
        </common-cyclic-chart>
        <div class="txt-box">
          <p class="eco-text">非税收入完成（万元）</p>
          <p class="eco-number">{{financiaConfig.finance.total}}</p>
          <p class="eco-text txt-just">
            <span>超平均进度</span>
            <span>{{financiaConfig.finance.overRate}}%</span>
          </p>
          <p class="eco-text txt-just">
            <span>超收（万元）</span>
            <span>{{financiaConfig.finance.overIncome}}</span>
          </p>
        </div>
      </div>
    </div>

    <div class="card-item">
      <div class="card-title">
        税收收入情况
      </div>
      <div class="card-main">
        <common-cyclic-chart ref="taxRevenue" :config="taxConfig" class="cyclic-box tax-cyc"></common-cyclic-chart>
        <div class="txt-box">
          <p class="eco-text">税收收入完成（万元）</p>
          <p class="eco-number">{{taxConfig.tax.total}}</p>
          <p class="eco-text txt-just">
            <span>超平均进度</span>
            <span>{{taxConfig.tax.overRate}}%</span>
          </p>
          <p class="eco-text txt-just">
            <span>超收（万元）</span>
            <span>{{taxConfig.tax.overIncome}}</span>
          </p>
        </div>
      </div>
    </div>

    <div class="card-item">
      <div class="card-title">
        非税收入结构
      </div>
      <div class="card-main" style="height:440px">
        <common-pieNew-chart ref="financiaPie" :config='financiaPieConfig'></common-pieNew-chart>
      </div>
    </div>

    <div class="card-item">
      <div class="card-title">
        税收收入结构
      </div>
      <div class="card-main" style="height:440px;padding:0;">
        <common-pieNew-chart ref="taxPie" :config='taxPieConfig'></common-pieNew-chart>
      </div>
    </div>

    <div class="card-item">
      <div class="card-title">
        洪洞县非税收入趋势
      </div>
      <div class="card-main" style="height:330px">
          <common-dualarea-chart ref="financiaLine" :config="financiaLineConfig"></common-dualarea-chart>
      </div>
    </div>

    <div class="card-item">
      <div class="card-title">
        洪洞县税收收入趋势
      </div>
      <div class="card-main" style="height:330px">
          <common-dualarea-chart ref="taxLine" :config="taxLineConfig"></common-dualarea-chart>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts';
  import CommonCyclicChart from '@/components/common/common-cyclic-chart.vue';
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonDualareaChart from "@/components/common/common-dualarea-chart.vue";
  import { getFinancialAndTaxStatus, getMonthlyFinancialAndTaxTend} from "@/network/adaptor.js"

  export default {
    name: 'leftSubcontent',
    components: {
      CommonCyclicChart,
      CommonPieNewChart,
      CommonDualareaChart
    },
    data() {
      return {
        financiaConfig: {
          option: {
            id: 'cyclic-chart-1',
            txtColor: '#FFAC09',
            startColor: '#FF8400',
            endColor: '#FFFC1B',
            value: 0
          },
          finance:{}
        },
        taxConfig: {
          option: {
            id: 'cyclic-chart-2',
            txtColor: '#4AC4FF',
            startColor: '#2233F6',
            endColor: '#62FFF6',
            value: 0
          },
          tax:{}
        },
        financiaPieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            title: '',
            id: 'financiaPie',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7', '#FDD100', '#4BC89B'],
            legend: {
              show: true,
              x: "center",
              y: "bottom",
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              padding: 15,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [40, 100],
              center: ['50%', '40%'],
              label: {
                formatter: '{b}\n{d}%'
              },
              // x: '20%',               // for funnel
              // max: 40,                // for funnel
              data: []
            }]
          }
        },
        taxPieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            title: '',
            id: 'taxPie',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7', '#FDD100', '#4BC89B'],
            legend: {
              show: true,
              x: "center",
              y: "bottom",
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              padding: 15,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [40, 100],
              center: ['50%', '40%'],
              label: {
                normal:{
                  show:true,
                  formatter: '{b}\n{d}%'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              // x: '20%',               // for funnel
              // max: 40,                // for funnel
              data: []
            }]
          }
        },
        financiaLineConfig: {
            request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'financiaLineLine',
            x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            y:[{
                axis:{
                    min:0,
                    max:null,
                    offset:-20,
                    name:"(万)"
                },
                title:'',
                data:[],
                startColor:"#00FFFF",
                endColor:"#002140"
            },{
                title:'',
                data:[],
                startColor:"#FF9600",
                endColor:"#002140"
            }]
          }
        },
        taxLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'taxLineLine',
            x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            y:[{
                axis:{
                    min:0,
                    max:null,
                    offset:-20,
                    name:"(万)"
                },
                title:'',
                data:[],
                startColor:"#00FFFF",
                endColor:"#002140"
            },{
                title:'',
                data:[],
                startColor:"#FF9600",
                endColor:"#002140"
            }]
          }
        }
      }
    },
    mounted() {
      this.getFinancialAndTax();
      this.initFinanciaAndTaxPie();
      this.initFinanciaAndTaxLine();
    },
    methods: {
      getFinancialAndTax() {
        this.$get(this.$api.getFinancialAndTaxStatistics).then(res => {
          if (res.code === 200) {
            this.financiaConfig.finance = res.data.finance;
            this.financiaConfig.option.value = res.data.finance.targetRate;
            this.taxConfig.tax = res.data.tax;
            this.taxConfig.option.value = res.data.tax.targetRate;

            this.$refs.financialRevenue.initChart();
            this.$refs.taxRevenue.initChart();

            let iframe = document.getElementById("econ");

            let iframeWindow = iframe.contentWindow;
            setTimeout(function() {
              iframeWindow.postMessage({
                czsr:res.data.finance.total,   //财政收入
                sssr:res.data.tax.total,
                czrate:res.res.data.finance.targetRate,
                ssrate:res.data.tax.targetRate,
              },"*")
            }, 10000);
          }
        })
      },
      initFinanciaAndTaxPie() {
        getFinancialAndTaxStatus().then(res => {
          this.financiaPieConfig.option.legend.data = res.financial.map(item => item.name);
          this.financiaPieConfig.option.series[0].data = res.financial;

          this.taxPieConfig.option.legend.data = res.tax.map(item => item.name);
          this.taxPieConfig.option.series[0].data = res.tax;

          this.$refs.financiaPie.initChart();
          this.$refs.taxPie.initChart();
        });
      },
      initFinanciaAndTaxLine() {
        getMonthlyFinancialAndTaxTend().then(res => {
          // this.financiaLineConfig.option.y[0].title = res.financial[0].title;
          // this.financiaLineConfig.option.y[0].data = res.financial[0].data;

          this.financiaLineConfig.option.y[1].title = res.financial[1].title;
          this.financiaLineConfig.option.y[1].data = res.financial[1].data;

          // this.taxLineConfig.option.y[0].title = res.tax[0].title;
          // this.taxLineConfig.option.y[0].data = res.tax[0].data;

          this.taxLineConfig.option.y[1].title = res.tax[1].title;
          this.taxLineConfig.option.y[1].data = res.tax[1].data;

          this.$refs.financiaLine.initChart();
          this.$refs.taxLine.initChart();
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  .left-sub-content {
    width: 1240px;
    float: left;
  }

  .card-item {
    display: inline-block;
    // height: 440px;
    float: none;
    margin-bottom: 20px;

    .card-title {
      padding-left: 17px;
    }
  }

  .card-item:nth-child(even) {
    margin-left: 15px;
  }

  .card-main {
    height: 387px;
    padding: 20px;
    box-sizing: border-box;
  }

  .cyclic-box {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    margin: 102px 0 0 80px;
    float: left;
  }

  .financia-cyc {
    border: 1px solid #FFAA09;
  }

  .tax-cyc {
    border: 1px solid #5BB9D3;
  }

  .txt-box {
    float: right;
    margin: 50px 50px 0 0;

    .eco-text {
      text-align: center;
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(233, 244, 255, 1);
      line-height: 55px;
    }

    .eco-number {
      text-align: center;
      font-size: 36px;
      font-family: Digitalism;
      font-weight: 400;
      color: rgba(251, 204, 19, 1);
      line-height: 41px;
      margin: 28px auto 50px;
    }
  }

  .eco-text.txt-just {
    display: flex;
    justify-content: space-between;
  }

</style>
